<template>
	<div class="layout-pd">
    <zh-header-toolbar>
			<zh-button v-if="activeName === 'baseInfo'" :disabled="state.orgInfo.disabled" buttonType="add" @click="orgAdd">同级新增</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" :disabled="state.orgInfo.disabled" buttonType="add" @click="childOrgAdd">子级新增</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" :disabled="state.orgInfo.disabled" buttonType="save" @click="saveOrg">保存</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" :disabled="state.orgInfo.disabled" buttonType="del" @click="deleteOrg">删除</zh-button>
			<zh-button v-if="activeName === 'baseInfo'" :disabled="state.orgInfo.disabled" icon="ele-Refresh" type="warning" @click="clearOrgCache">清除缓存</zh-button>
			<zh-button v-if="activeName === 'roleList'" :disabled="state.orgInfo.disabled" buttonType="add" @click="openRole">添加到角色</zh-button>
      <zh-button v-if="activeName === 'roleList'" :disabled="state.orgInfo.disabled" buttonType="del" @click="deleteRole">角色中删除</zh-button>
			<zh-button v-if="activeName === 'userList'" :disabled="state.orgInfo.disabled" buttonType="add" @click="addUser">授权到用户</zh-button>
			<zh-button v-if="activeName === 'userList'" :disabled="state.orgInfo.disabled" buttonType="del" @click="deleteUser">解除用户授权</zh-button>
		</zh-header-toolbar>
    <zh-row>
			<zh-col :span="6">
        <el-tabs type="border-card" v-model="activeOrgName" @tab-click="handleOrgClick">
          <el-tab-pane label="组织树" name="orgTreeTab">
            <OrgTree  ref="orgTreeRef" @node-click="treeNodeClick"></OrgTree>
          </el-tab-pane>
          <el-tab-pane label="组织列表" name="orgListTab">
            <OrgList ref="orgListRef" @node-click="listNodeClick"></OrgList>
          </el-tab-pane>
        </el-tabs>
			</zh-col>
			<zh-col :span="18">
        <zh-card shadow="hover">
					<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
						<el-tab-pane label="基础信息" name="baseInfo">
              <OrgForm ref="orgFormRef" :org="state.orgInfo" />
            </el-tab-pane>
						<el-tab-pane label="角色列表" name="roleList">
							<RoleModule ref="orgRoleFormRef" :id="state.orgInfo.orgId" type="org"  :disabled="state.orgInfo.disabled"/>
						</el-tab-pane>
						<el-tab-pane label="用户列表" name="userList">
							<UserModule ref="orgUserFormRef" title="路由关联用户" :id="state.orgInfo.orgId" :disabled="state.orgInfo.disabled" type="org" />
						</el-tab-pane>
					</el-tabs>
				</zh-card>
      </zh-col>
    </zh-row>
  </div>
</template>
<script lang="ts" setup name="orgManager">
import OrgTree from './component/OrgTree.vue';
import OrgList from './component/OrgList.vue';
import OrgForm from './component/OrgForm.vue';
import UserModule from '@/views/system/component/UserModule.vue';
import RoleModule from '@/views/system/component/RoleModule.vue';
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------

//------------------定义子组件---------------------------
let orgListRef=ref();
let orgTreeRef=ref();
let orgFormRef=ref();
const orgRoleFormRef = ref();
const orgUserFormRef = ref();
//------------------内部变量定义-------------------------
const activeName = ref('baseInfo');
const activeOrgName=ref('orgTreeTab');
const state =reactive({
  orgInfo:{disabled:true} as any,
  saveType:'edit',
  addFlag:false,
});
let selectNode= ref();
//------------------定义调用方法-------------------------
//改变tab调用方法
const handleOrgClick = () => {
  let orgInfo={orgId:null}
  state.saveType = 'edit';
  state.orgInfo=orgInfo;
  if(activeOrgName.value==='orgListTab'){
    orgListRef.value.clearActive();
  }else if(activeOrgName.value==='orgTreeTab'){
    if(state.addFlag){
      state.addFlag=false
      orgTreeRef.value.query();
    }
  }
};
const handleClick = () => {
  if (!state.orgInfo.orgId) {
    ElMessage({
			message: '请先在左边列表中选择需要操作的组织',
			type: 'warning',
		});
    return;
  }
  if(activeName.value==='roleList'){
    //orgRoleFormRef.value.onRoleQuery();
  }else if(activeName.value==='userList'){
    console.log("1234:"+state.orgInfo.orgId)
    //orgUserFormRef.value.onUserQuery();
  }
};
const treeNodeClick=(node)=>{
  let orgInfo={orgId:node.key,disabled:node.disabled}
  state.saveType = 'edit';
  //点击树节点触发事件
	selectNode.value = node;
  state.orgInfo=orgInfo;
  handleClick();
}
const listNodeClick=(node)=>{
  state.saveType = 'edit';
  let orgInfo={orgId:node.orgId};
  state.orgInfo=orgInfo;
  handleClick();

}
const orgAdd = async () => {
	//同级新增
	if (state.orgInfo.orgId) {
		state.saveType = 'add';
		let oldOrg = Object.assign({},orgFormRef.value.orgInfo);
		state.orgInfo = {
      orgId:'',
			parentId: oldOrg.parentId,
			parentName: oldOrg.parentName,
			orderNo: oldOrg.orderNo,
			rate: oldOrg.rate,
      orgType:oldOrg.orgType,
      status:'1',
      treeFlag:'0',
      fictitious:'0',
      insideFlag:'0',
      idustryType:oldOrg.idustryType
		};
    orgListRef.value.clearActive();
	} else {
		ElMessage({
			message: '请先在左边列表中选择需要操作的组织',
			type: 'warning',
		});
	}
};
const childOrgAdd = () => {
	//子级新增
	if (state.orgInfo.orgId) {
		state.saveType = 'childAdd';
		let oldOrg = Object.assign({},orgFormRef.value.orgInfo);
		let rate = oldOrg.rate;
		if (rate) {
			rate = rate + 1;
		} else {
			rate = 1;
		}
		state.orgInfo = {
      orgId:null,
			parentId: oldOrg.orgId,
			parentName: oldOrg.orgName,
			orderNo: null,
			rate: rate,
      orgType:oldOrg.orgType,
      status:'1',
      treeFlag:'0',
      fictitious:'0',
      insideFlag:'0',
      idustryType:oldOrg.idustryType
		};
    orgListRef.value.clearActive();
	} else {
		ElMessage({
			message: '请先在左边列表中选择需要操作的组织',
			type: 'warning',
		});
	}
};
const deleteOrg = () => {
	//删除组织
	if (state.orgInfo.orgId) {
		const params = { orgId: state.orgInfo.orgId };
		$api.common.send.post('org0006',params).then(() => {
      if(activeOrgName.value==='orgTreeTab'){
        orgTreeRef.value.remove(state.orgInfo.orgId);
      }
			ElMessage({
				message: '删除组织成功',
				type: 'success',
			});
		});
	} else {
		ElMessage({
			message: '请先在左边列表中选择需要删除的节点',
			type: 'warning',
		});
	}
};
const clearOrgCache = () => {
	//清除组织缓存
	const params = { orgId: state.orgInfo?.orgId,orgCode: state.orgInfo?.orgCode };
	$api.common.send.post('org0034',params).then(() => {
		ElMessage({
			message: '清理组织缓存成功',
			type: 'success',
		});
	});
};
async function saveOrg() {
	// 表单验证
	let res = await orgFormRef.value.saveForm();
	if (res && res.code === 0) {
		//保存成功
    let result=res.result;
		if (res.saveType === 'add') {
      if(activeOrgName.value==='orgListTab'){
        state.addFlag=true;
        orgListRef.value.query(result.orgName);
      }else {
        const addNode = {
          key: result.orgId,
          title: result.orgName,
          isLeaf: true,
          parentKey: result.parentId,
        };
        console.log(selectNode.value.key)
        if (state.saveType === 'childAdd') {
          //子集新增
          orgTreeRef.value.append(addNode, selectNode.value.key);
        } else {
          //同级新增
          orgTreeRef.value.insertBefore(addNode, selectNode.value.key);
        }
      }
			//新增树节点
      ElMessage.success('新增成功！');
		} else if (res.saveType === 'edit') {
      if(activeOrgName.value==='orgListTab'){
        orgListRef.value.refresh();
      }else{
        selectNode.value.title = result.orgName;
      }
			//更新树节点信息
      ElMessage.success('修改成功！');
		}
	}
}
const addUser = () => {
	//添加用户
	orgUserFormRef.value.openAddUserModule();
};
const deleteUser = () => {
	//删除关联用户信息
	orgUserFormRef.value.deleteUser();
};
const openRole = () => {
	//打开添加角色
	orgRoleFormRef.value.openRoleModule();
};
const deleteRole = ()=>{
  //删除角色
  orgRoleFormRef.value.deleteRole();
}
//------------------初始化------------------------------
onMounted(()=>{})
//------------设置给父组件调用的数据/方法(组件)-----------

</script>
<style lang="scss" scoped >
.zh-select-input{
  :deep(.el-input-group__prepend){
    padding: 0 !important;
  }
  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base)) 0 0 var(--el-input-border-radius, var(--el-border-radius-base)) ;
  }
}
</style>